<template>
  <div>
    <!-- 头部分 -->
    <div class="List_header">
      <div class="List_search">
        <div>
          选择频道:
          <el-select v-model="articleCaption.channelCategoryId" placeholder="请选择">
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <span>创建时间：
          <el-date-picker
            v-model="seTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
            </el-date-picker>
<!--         <el-input v-model="articleCaption.filterBegin" placeholder="请输入内容" class="input"/> - -->
<!--         <el-input v-model="articleCaption.filterEnd" placeholder="请输入内容" class="input"/>-->
           <el-button type="success" @click="changeTab">搜索</el-button>
       </span>
      </div>
    </div>

    <!-- 身体部分 -->
    <div class="List_body">
      <el-button type="success" round style="margin-top: 18px" @click="$router.push('/informationEdit')">添加资讯
      </el-button>
      <el-tabs type="border-card" @tab-click="changeTab">
        <!-- 资讯列表 -->
        <el-tab-pane label="已发布">
          <el-table
            ref="multipleTable"
            :data="articles"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
            >
            </el-table-column>
            <el-table-column
              label="编号"
              prop="id"
            >
            </el-table-column>
            <el-table-column
              label="标题"
              prop="title"
            >
            </el-table-column>
            <el-table-column
              label="是否推荐"
            >
              <template slot-scope="scope">{{ scope.row.frontPageShow ? '推荐' : '不推荐' }}</template>
            </el-table-column>
            <el-table-column
              label="所属频道"
            >
              <template slot-scope="scope">{{ scope.row.channelCategoryName.trim() ? scope.row.channelCategoryName :
                '暂无' }}
              </template>
            </el-table-column>
            <el-table-column
              label="所属子频道"
              show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.childCategoryName ? scope.row.childCategoryName : '暂无' }}
              </template>
            </el-table-column>
            <el-table-column
              label="标签"
            >
              <template slot-scope="scope">{{ scope.row.articleLabel ? scope.row.articleLabel : '暂无' }}</template>
            </el-table-column>
            <el-table-column
              label="创建时间"
            >
              <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <el-popconfirm
                  title="要下架这条资讯吗？"
                  @confirm="handlexiajia(scope.$index, scope.row)"
                >
                  <el-button
                    slot="reference"
                    size="mini"
                    type="warning">下架
                  </el-button>
                </el-popconfirm>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="handleDelete(scope.$index, scope.row)"
                >
                  <el-button
                    size="mini"
                    type="danger"
                    slot="reference"
                  >删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: center">
            <el-pagination
              @current-change="changeIndex"
              background
              layout="prev, pager, next"
              :total="articlesTotal"
              :hide-on-single-page="true">
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- 回收站 -->
        <el-tab-pane label="已下架">
          <el-table
            ref="multipleTable"
            :data="jia"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
            >
            </el-table-column>
            <el-table-column
              label="编号"
              prop="id"
            >
            </el-table-column>
            <el-table-column
              label="标题"
              prop="title"
            >
            </el-table-column>
            <el-table-column
              label="是否推荐"
            >
              <template slot-scope="scope">{{ scope.row.frontPageShow ? '推荐' : '不推荐' }}</template>
            </el-table-column>
            <el-table-column
              label="所属频道"
            >
              <template slot-scope="scope">{{ scope.row.channelCategoryName.trim() ? scope.row.channelCategoryName :
                '暂无' }}
              </template>
            </el-table-column>
            <el-table-column
              label="所属子频道"
              show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.childCategoryName ? scope.row.childCategoryName : '暂无' }}
              </template>
            </el-table-column>
            <el-table-column
              label="标签"
            >
              <template slot-scope="scope">{{ scope.row.articleLabel ? scope.row.articleLabel : '暂无' }}</template>
            </el-table-column>
            <el-table-column
              label="创建时间"
            >
              <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <el-popconfirm
                  title="是否上架此条资讯？"
                  @confirm="shangjia(scope.row.id)"
                >
                  <el-button
                    size="mini"
                    type="danger"
                    slot="reference">发布
                  </el-button>
                </el-popconfirm>

              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: center">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="jiaTotal"
              @current-change="changeIndex"
              :hide-on-single-page="true">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
let pickerOptions = {
  shortcuts: [{
    text: '最近一周',
    onClick (picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近一个月',
    onClick (picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近三个月',
    onClick (picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      picker.$emit('pick', [start, end])
    }
  }]
}

export default {
  data () {
    return {
      pickerOptions,
      seTime: [],
      input: '',
      articles: [],
      articlesTotal: 0,
      jia: [],
      jiaTotal: 0,
      articleCaption: {
        channelCategoryId: '',
        current: 1,
        filterBegin: '',
        filterEnd: '',
        label: '',
        orders: [
          {
            asc: true,
            column: ''
          }
        ],
        showHide: true,
        size: 10
      },
      multipleSelection: [],
      options: []
    }
  },
  created () {
    this.getArticleDTO(true, 'articles')
    this.getArticleDTO(false, 'jia')
    this.$http('/stage/article/getChannelCategory', {}, 'post', res => {
      this.options = res.data.data.records
    })
  },
  watch: {
    seTime (newV) {
      console.log(newV)
      if (newV != null && !newV.length) {
        this.articleCaption.filterBegin = this.articleCaption.filterEnd = ''
        return
      }
      this.articleCaption.filterBegin = this.getTime2(newV[0])
      this.articleCaption.filterEnd = this.getTime2(newV[1])
    }
  },
  methods: {
    changeTab () {
      this.articleCaption.current = 1
      this.getArticleDTO(false, 'jia')
      this.getArticleDTO(true, 'articles')
    },
    // 点击分页内容
    changeIndex (i) {
      this.articleCaption.current = i
      this.getArticleDTO(false, 'jia')
      this.getArticleDTO(true, 'articles')
    },
    // 上架下架的资讯
    shangjia (id) {
      this.$http('/stage/article/onlineShelves', {articleId: id}, 'get', () => {
        this.getArticleDTO(false, 'jia')
        this.getArticleDTO(true, 'articles')
      })
    },
    // 跳转到编辑页
    handleEdit (i, v) {
      localStorage.setItem('Edit', JSON.stringify(v))
      this.$router.push(`informationEdit`)
    },
    getArticleDTO (bu, key) {
      let data = {}
      if (this.articleCaption.channelCategoryId) {
        data = {...this.articleCaption, showHide: bu}
      } else {
        data = {...this.articleCaption, channelCategoryId: this.articleCaption.channelCategoryId - 0, showHide: bu}
      }
      this.$http('/stage/article/getArticleDTO', data, 'post', (res) => {
        if (bu) {
          this.articlesTotal = res.data.data.total
        } else {
          this.jiaTotal = res.data.data.total
        }
        this[key] = res.data.data.records
      })
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 下架资讯
    handlexiajia (i, v) {
      let {id} = v
      this.$http('/stage/article/offlineShelves', {articleId: id}, 'get', (data) => {
        this.getArticleDTO(false, 'jia')
        this.getArticleDTO(true, 'articles')
        if (data.data.code === 200) {
          this.$message({
            type: 'success',
            message: '下架成功'
          })
        }
      })
    },
    // 删除资讯
    handleDelete (i, v) {
      let {id} = v
      this.$http('/stage/article/deleteArticle', {id}, 'get', (data) => {
        this.getArticleDTO(true, 'articles')
        if (data.data.code === 200) {
          this.$message({
            type: 'success',
            message: '资讯被删除'
          })
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>

  // 头部
  .List_header {
    width: 100%;
    height: 100px;

    //  头部搜索模块
    .List_search {
      height: 100px;
      margin: 0 auto;
      align-items: center;
      display: flex;
      width: 80%;
      justify-content: space-between;

      span {

        align-self: center;

        .input {
          width: 200px !important;
        }

        //  搜索按钮
        .search {
          width: 100px;
          border-radius: 5px;
        }
      }

    }
  }
</style>
